import type { ConversationProps } from "@/components/elements/Conversation";
import Conversation from "@/components/elements/Conversation";
import { Metrics } from "@/components/metrics";
import { Button } from "@/components/ui/button";
import { Panel, PanelContent, PanelHeader } from "@/components/ui/panel";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { TextMode } from "@/types/conversation";
import { LineChartIcon, MessagesSquareIcon } from "lucide-react";
import { memo, useState } from "react";

interface ConversationPanelProps {
  /**
   * Disable conversation tab.
   * @default false
   */
  noConversation?: boolean;
  /**
   * Disable metrics tab.
   * @default false
   */
  noMetrics?: boolean;
  /**
   * Props for the conversation element.
   */
  conversationElementProps?: Partial<ConversationProps>;
  /**
   * Text mode for displaying assistant messages.
   * - "llm": Shows text as it's generated by the LLM
   * - "tts": Shows text as it's spoken by the TTS
   * @default "llm"
   */
  textMode?: TextMode;
  /**
   * Disable text mode toggle.
   * @default false
   */
  noTextModeToggle?: boolean;
}

export const ConversationPanel: React.FC<ConversationPanelProps> = memo(
  ({
    conversationElementProps,
    noConversation = false,
    noMetrics = false,
    noTextModeToggle = false,
    textMode: initialTextMode = "llm",
  }) => {
    const defaultValue = noConversation ? "metrics" : "conversation";
    const [textMode, setTextMode] = useState<TextMode>(initialTextMode);
    return (
      <Tabs className="h-full" defaultValue={defaultValue}>
        <Panel className="h-full max-sm:border-none">
          <PanelHeader variant="noPadding" className="p-1.5 relative">
            <TabsList>
              {!noConversation && (
                <TabsTrigger value="conversation">
                  <MessagesSquareIcon size={20} />
                  Conversation
                </TabsTrigger>
              )}
              {!noMetrics && (
                <TabsTrigger value="metrics">
                  <LineChartIcon size={20} />
                  Metrics
                </TabsTrigger>
              )}
            </TabsList>
            {!noTextModeToggle && (
              <Button
                className="absolute right-1.5 top-1/2 -translate-y-1/2"
                variant="ghost"
                isIcon
                onClick={() => setTextMode(textMode === "tts" ? "llm" : "tts")}
              >
                {textMode === "tts" ? "TTS" : "LLM"}
              </Button>
            )}
          </PanelHeader>
          <PanelContent className="p-0! overflow-hidden h-full">
            {!noConversation && (
              <TabsContent
                value="conversation"
                className="overflow-hidden h-full"
              >
                <Conversation
                  {...conversationElementProps}
                  textMode={textMode}
                />
              </TabsContent>
            )}
            {!noMetrics && (
              <TabsContent value="metrics" className="h-full">
                <Metrics />
              </TabsContent>
            )}
          </PanelContent>
        </Panel>
      </Tabs>
    );
  },
);

export default ConversationPanel;
